<template>
  <div class="question">
    <el-card>
      <el-form :model="form" label-width="80px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="学科">
              <el-select v-model="form.subject" placeholder="请选择">
                <el-option
                  v-for="item in subList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="阶段">
              <el-select v-model="form.step" placeholder="请选择">
                <el-option
                  v-for="(item, index) in initData.stepList"
                  :key="index"
                  :label="item"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="企业">
              <el-select v-model="form.enterprise" placeholder="请选择">
                <el-option
                  v-for="item in entList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="题型">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="(item, index) in initData.typeList"
                  :key="index"
                  :label="item"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4"> </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">
            <el-form-item label="难度">
              <el-select v-model="form.difficulty" placeholder="请选择">
                <el-option
                  v-for="(item, index) in initData.diffList"
                  :key="index"
                  :label="item"
                  value="shanghai"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="作者">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option
                  v-for="(item, index) in initData.statusList"
                  :key="index"
                  :label="item"
                  value="shanghai"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="日期">
              <el-date-picker
                v-model="form.create_date"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="标题">
          <el-row :gutter="10">
            <el-col :span="9">
              <el-input class="inp" v-model="form.title"></el-input>
            </el-col>
            <el-col :span="14">
              <el-button type="primary" @click="submit">搜索</el-button>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="add">+新增试题</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="list" style="width: 100%">
        <el-table-column label="序号" sortable type="index">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.limit + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="题目">
          <template v-slot="{ row }">
            <div v-html="row.title"></div>
          </template>
        </el-table-column>
        <el-table-column label="学科.阶段">
          <template v-slot="{ row }">
            <div>{{ row.subject_name }}.{{ initData.stepList[row.step] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="题型">
          <template v-slot="{ row }">
            <div>{{ initData.typeList[row.type] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="enterprise_name" label="企业"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="状态">
          <template v-slot="{ row }">
            <div :class="{ text: !row.status }">
              {{ initData.statusList[row.status] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="reads" label="访问量"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" size="small" @click="edit(row)"
              >编辑</el-button
            >
            <!-- row.status -->
            <el-button type="text" size="small" @click="stop(row.id, row)">
              {{ initData.statusList[1 - row.status] }}
            </el-button>
            <el-button type="text" size="small" @click="del(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="page"
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="page.page"
        :page-sizes="[1, 5, 10, 20, 50]"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-card>
    <add
      v-model="isShow"
      :subList="subList"
      :entList="entList"
      :initData="initData"
      :mode="mode"
      @getData="getData"
      ref="add"
    ></add>
  </div>
</template>

<script>
import Add from './components/add.vue'
import { subjectList } from '@/api/subject.js'
import { questionList, questionRemove, questionStatus } from '@/api/question.js'
import { enterpriseList } from '@/api/business.js'
import initData from '@/api/constant/question.js'
export default {
  components: { Add },
  data () {
    return {
      form: {
        subject: '',
        step: '',
        enterprise: '',
        type: '',
        difficulty: '',
        username: '',
        status: '',
        create_date: '',
        title: ''
      },
      page: {
        total: 100,
        limit: 5,
        page: 1
      },
      list: [{}],
      subList: [],
      entList: [],
      value1: '',
      isShow: false,
      currentPage4: 1,
      initData: initData,
      mode: 'add',
      flag: true
    }
  },
  created () {
    this.getData()
    this.getSubject()
  },
  methods: {
    async getData () {
      const res = await questionList({ ...this.page, ...this.form })
      res.data.data.items.forEach((item) => {
        item.city = item.city.split(',')
        item.multiple_select_answer = item.multiple_select_answer.split(',')
      })
      this.list = res.data.data.items
      this.page.total = res.data.data.pagination.total
    },
    async getSubject () {
      const res = await subjectList({ limit: 9999 })
      const res2 = await enterpriseList({ limit: 9999 })
      console.log('学科', res)
      // console.log('企业', res2)
      this.subList = res.data.data.items
      this.entList = res2.data.data.items
    },
    add () {
      this.isShow = true
      this.mode = 'add'
    },
    sizeChange (size) {
      // console.log(size)
      this.page.limit = size
      this.page.page = 1
      this.getData()
    },
    currentChange (pagesize) {
      // console.log('pagesize', pagesize)
      this.page.page = pagesize
      this.getData()
    },
    submit () {
      console.log('form', this.form)
      this.getData()
    },
    async del (id) {
      await questionRemove(id)
      this.$message.error('删除成功')
      this.getData()
    },
    async stop (id, row) {
      await questionStatus(id)
      this.$message.success(initData.statusList[1 - row.status] + '成功')
      this.getData()
    },
    async edit (row) {
      this.mode = 'edit'
      this.isShow = true
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    clear () {
      this.form = {
        subject: '',
        step: '',
        enterprise: '',
        type: '',
        difficulty: '',
        username: '',
        status: '',
        create_date: '',
        title: ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
.question {
  width: 100%;
  .bt {
    display: flex !important;
  }
  .page {
    text-align: center;
  }
  .row {
    display: flex;
    .btn {
      display: flex;
    }
  }
  .inp {
    width: 100%;
  }
  .text {
    color: red !important;
  }
}
</style>
